<template>
    <div class="choseModel">
        <div class="choseModel-container">
          
            <div style="position: fixed;width: 744px;z-index: 100000;background: white;top: 120px;">
                <div class="choseModel-title">
                模型广场
            </div>
                <!-- 搜索框 -->
                <div class="choseModel-search">
                    <el-input v-model="searchVal" style="width: 50%" size="large" placeholder="搜索模型"
                        suffix-icon="Search" @change="searchModel" />
                </div>
                <!-- 模型分类 -->
                <div class="choseModel-list">
                    <el-button :class="0 == choseType ? 'active' : ''" @click="choseAllModel">全部</el-button>
                    <div style="width: 1px;height: 32px; background-color: #797979;margin: 0 10px;"></div>
                    <el-scrollbar noresize height="50">
                        <div style="display: flex;">
                            <el-button v-for="(item, index) in modelType" :key="index"
                                :class="item.id == choseType ? 'active' : ''" @click="choseTypeMethod(item, index)">{{
                        item.value }}</el-button>
                        </div>
                    </el-scrollbar>
                    <!-- <div>
                  
                </div> -->
                </div>
            </div>
            <!-- 具体模型 -->
            <div class="choseModel-items">
                <div class="choseModel-item" v-for="(item, index) in 20" :key="index"
                    @click="choseModelItem(item, index)">
                    <div class="choseModel-item-container">
                        <!-- 模型图片 -->
                        <img src="https://cdn.seovx.com/?mom=302" alt="">
                        <!-- 模型描述 -->
                        <div class="choseModel-item-text" :class="item == choseModelId ? 'choseModelItemBg' : ''">
                            <div class="choseModel-item-title">精选推荐</div>
                            <div class="choseModel-item-label">
                                <text>雪景</text>
                                <text>雪景</text>
                                <text>雪景</text>
                            </div>
                        </div>

                    </div>
                    <div v-show="item == choseModelId" class="choseShowText">
                        <div class="choseShowText-icon-add">
                            <el-icon size="32"><CirclePlus /></el-icon>
                        </div>
                        <div class="choseShowText-icon-refresh">
                            <el-icon size="22">
                                <Refresh />
                            </el-icon> <text>复用效果</text>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, reactive, computed } from 'vue';

export default {
    name: 'choseModel',
    setup() {
        // 搜索值
        let searchVal = ref("")
        // 选中的模型
        let choseModelId = ref(0)
        // 模型分类
        let modelType = [{
            value: "雪景",
            id: 1
        }, {
            value: "摄影棚",
            id: 2
        }, {
            value: " 客厅",
            id: 3
        }, {
            value: "咖啡厅",
            id: 4
        }, {
            value: "海边",
            id: 5
        }, {
            value: "街道",
            id: 6
        }, {
            value: "草坪",
            id: 7
        }, {
            value: "公园",
            id: 8
        }, {
            value: "霓虹街道",
            id: 9
        }]
        // 选中的分类
        let choseType = ref(0);
        // 选择分类 事件
        const choseTypeMethod = (item, index) => {
            choseType.value = item.id
        };
        // 选择全部的分类
        const choseAllModel = () => {
            choseType.value = 0
        }
        // 搜索分类
        const searchModel = (e) => {
            console.log(e);
        }
        // 选择模型具体项
        const choseModelItem = (item, index) => {
            console.log(item, index, choseModelId);
            choseModelId.value = item
            console.log(choseModelId, 'choseModelId');
        }
        return { choseModelId, searchVal, modelType, choseType, choseTypeMethod, choseAllModel, searchModel, choseModelItem };
    }
};
</script>

<style scoped lang="scss">
.active {
    background-color: #AAAAAA;
}

.choseShowText {
    position: absolute;
    width: 100%;
    background: rgba(138, 138, 138, 0.5);
    height: 175px;
    padding-right: 14px;
    bottom: -10px;
    line-height: 110px;
    color: white;
    border-radius: 10px;
}

.choseShowText-icon-refresh {
    width: 100%;
    background: rgba(0, 0, 0, .1);
    height: 66px;
    padding-right: 14px;
    line-height: 70px;
    color: white;
    margin-top: -3px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.choseModelItemBg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
    margin-top: -11px;
    top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 10px;
    padding-right: 14px;
    border-radius: 10px;
}

.choseModel-container {
    width: 96%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}


.choseModel-title {
    width: 100%;
    text-align: center;
    font-weight: 600;
    height: 50px;
}


.choseModel-list {
    display: flex;
    margin: auto;
    margin-top: 40px;
    width: 100%;
}

.choseModel-items {
    display: flex;
    flex-wrap: wrap;
    margin-top: 186px;
    height: 420px;
    overflow-y: scroll;
    .choseModel-item {
        width: 20%;
        margin-left: 28px;
        position: relative;
        margin-bottom: 20px;

        .choseModel-item-container {
            img {
                width: 100%;
                border: 6px solid #B3B3B3;
                height: auto;
                border-radius: 10px;
            }

            .choseModel-item-title {
                text-align: left;
                margin-left: 10px;
            }

            .choseModel-item-label {
                display: flex;
                justify-content: space-around;
                margin-top: 10px;

                .el-button {
                    border-radius: 12px;
                }

                text {
                    padding: 0 8px;
                    background: #F2F2F2;
                    color: #AAAAAA;
                    border-radius: 8px;
                }
            }
        }

    }
}
</style>